import { Meta } from "@storybook/addon-docs";
import { useTheme, ThemeProvider } from "@design-system/theming";
import { TokenTable, StyledSquarePreview } from "@design-system/storybook";

<Meta title="Design-system/Theme/Tokens/BorderRadius" />

# BorderRadius

Border radius is a commonly used design element in user interfaces that
can add visual interest and depth to an application. By incorporating
standardized border radius values into our design system, we can create
a more cohesive and professional look for our products.

## Tokens Table

export const BorderRadius = () => {
  const { theme } = useTheme();
  const { borderRadius } = theme;
  return (
    <ThemeProvider theme={theme}>
      <TokenTable prefix="border-radius" tokens={borderRadius}>
        {(cssVar) => (
          <StyledSquarePreview
            style={{
              borderRadius: cssVar,
            }}
          />
        )}
      </TokenTable>
    </ThemeProvider>
  );
};

<BorderRadius />
